import { message } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import React, { PureComponent } from 'react';

import CompareYearC from './compareYearC';
import Mystyle from './index.less';
import OrganViewC from './organViewC';
import ProductNumScaleC from './productNumScaleC';
import ProductViewC from './productViewC';

import { DATA_ENTRY, AdvancedSearch, ContentPackage } from '../../../comps';

class OrganProductAnalysisP extends PureComponent {
  // eslint-disable-next-line react/state-in-constructor
  state = {
    args: {
      startDate: moment().subtract(1, 'y').add(1, 'd'),
      endDate: moment(),
      tenantId: [],
      timestamp: +new Date(),
    },
  };

  searchDocker = (e) => {
    if (!e) {
      const beginDate = moment().subtract(1, 'y').add(1, 'd');
      const endDate = moment();
      if (this.COMPLEXDATE) {
        this.COMPLEXDATE.setSelctAndDate('7', beginDate, endDate);
      }
      this.setState({
        args: {
          endDate,
          startDate: beginDate,
          tenantId: [],
          timestamp: +new Date(),
        },
      });
      return false;
    }
    this.setState({
      args: {
        endDate: moment(e.endDate).format('YYYY-MM-DD'),
        startDate: moment(e.startDate).format('YYYY-MM-DD'),
        tenantId: e.tenantId ?? [],
        timestamp: +new Date(),
      },
    });
  };

  componentDidMount() {
    const beginDate = moment().subtract(1, 'y').add(1, 'd');
    const endDate = moment();
    this.timerId = setInterval(() => {
      if (this.COMPLEXDATE) {
        clearInterval(this.timerId);
        this.COMPLEXDATE.setSelctAndDate('7', beginDate, endDate);
      }
    }, 100);
  }

  render() {
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'date',
          title: '日期区间',
          multiple: true,
          type: DATA_ENTRY.COMPLEXDATE,
          selectIndex: 'select2', // Form识别的下拉选项Item ID
          startIndex: 'startDate', // Form识别的开始时间Item ID
          endIndex: 'endDate', // Form识别的结束时间Item ID
          selfDefination: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
          onRef: (ref) => (this.COMPLEXDATE = ref),
        },
        {
          dataIndex: 'tenantId',
          title: '租户',
          multiple: true,
          type: DATA_ENTRY.TENANT,
          filterTenants: ['HTSC-TEST', 'HTSC-JXZY'], // 过滤掉不需要得租户
        },
      ],
      onQuery: (e) => {
        if (e.startDate && e.endDate) {
          this.searchDocker(e);
        } else {
          message.warning('时间区间必填!');
        }
      },
      onClear: (e) => {
        this.searchDocker(e);
      },
    };
    const { args } = this.state;
    const isShow = args.startDate || args.endDate || args.tenantId.length > 0;
    return (
      <div className={Mystyle.overall}>
        <ContentPackage
          title='机构产品分析'
          contentHtml={
            <>
              <div style={{ marginBottom: '20px' }}>
                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                <AdvancedSearch {...searchProps} />
              </div>
              {/* 产品概览 */}
              <ProductViewC />
              {isShow && <ProductNumScaleC args={args} />}
              {isShow && <CompareYearC args={args} />}
              {isShow && <OrganViewC args={args} />}
            </>
          }
        />
      </div>
    );
  }
}
export default connect(({ organProductAnalysisM, loading }) => ({
  organProductAnalysisM,
  loading,
}))(OrganProductAnalysisP);
